<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>比赛实况</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
    <link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_evmq6xwfabutyb9.css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css"
          href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_i0327076nave7b9.css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
        #allmap {
            height: 400px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #example_paginate {
            float: right;
        }

        .handle-btn {
            cursor: pointer;
            margin: 0 2px;
        }

        #wrapper {
            padding-left: 0px;
        }

        .navigation {
            border-bottom: 3px solid #edebeb;
        }

        .navigation a:hover {
            color: #0F6AFC;
            border-bottom: 2px solid #01AAED;
        }

        .this {
            color: #01aaed;
            font-weight: bold;
            border-bottom: 2px solid #01AAED;
        }

        #realTime > thead {
            display: none;
        }

        #Illegal > thead {
            display: none;
        }

        #achievement > tbody tr {
            line-height: 20px;
            text-align: center;
        }

        #achievement > tbody td {
            text-align: center;
        }

        .odd {
            background: #f5f5f5;
        }

        .div_modle {
            position: absolute;
            top: 55px;
            left: 30px;
            width: 260px;
            height: 170px;
            background: #D4D4D4;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            -khtml-opacity: 0.8;
            opacity: 0.8;
        }
    </style>
</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">无人车管理系统</a>
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav">

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 用户名 <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    <div id="page-wrapper">

        <div class="container-fluid">
            <div class="row sss">
                <nav class="navbar navbar-default" role="navigation">
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    比赛信息
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="active"><a href="index.html">比赛实况</a></li>
                                    <li class="divider">
                                    <li><a href="Check.html">比赛回查</a></li>
                                </ul>
                            </li>
                            <li><a href="achievement.html">成绩管理</a></li>
                            <li><a href="ParticipatingTeams.html">参赛车队</a></li>
                            <li><a href="Court.html">赛场维护</a></li>
                            <li><a href="Fault.html">场景维护</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    基础数据
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="device.html">设备管理</a></li>
                                    <li class="divider">
                                    <li><a href="Referee.html">裁判管理</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="row">
                <div class="col-lg-9">
                    <div class="col-lg-7">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> 实时成绩</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table">
                                    <table id="realTime" class="display" width="100%"></table>
                                </div>
                                <div class="text-right">
                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> 违规信息</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table">
                                    <table id="Illegal" class="display" width="100%"></table>
                                </div>
                                <div class="text-right">
                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> 故障支援</h3>
                            </div>
                            <div class="panel-body" id="panel" id="faultSupportDetail">
                                <div id="allmap"></div>
                                <div class="div_modle" v-show="labelShow">
                                    <div class="form-group">
                                        <label class="col-sm-12">高速赛场</label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-5 control-label">{{faultSupport.teamName}}：</label>
                                        <label class="col-sm-7">{{faultSupport.faultDesc}}</label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-5 control-label">位置：</label>
                                        <label class="col-sm-7">{{faultSupport.locationDesc}}</label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-12 control-label">{{faultSupport.refereeName}}</label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-5 control-label">提交时间：</label>
                                        <label class="col-sm-7">{{faultSupport.createTimeInfo}}</label>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-6"><span style="color: red;">{{faultSupport.faultSupportStateInfo}}</span></label>
                                        <label class="col-sm-6">
                                            <button type="button" class="btn btn-primary"
                                                    v-on:click="changeState(faultSupport.faultSupportId)">
                                                提交更改
                                            </button>
                                        </label>
                                    </div>
                                </div>


                                <div class="text-right">
                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> 成绩榜</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table">
                                    <table id="achievement" class="display" width="100%"></table>
                                </div>
                                <div class="text-right">
                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /.曲线图 -->
        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- tab table-->
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="nuget/content/scripts/toastr.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<!-- <script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>-->
<script type="text/javascript" src="js/realTime.js"></script>
<script type="text/javascript" src="js/Illegal.js"></script>
<script type="text/javascript" src="js/achievement.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/vue-router.js"></script>
<!--百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>
<script>


    var vue = new Vue({
        el: '#page-wrapper',
        data: {
            map: null,
            faultSupport: {},
            faultSupports: [],
            markers: [],
            labelShow:false,
        },
        mounted: function () {
            this.map = new BMap.Map("allmap");
            this.init();
            this.drawMarks();
        },
        methods: {
            init: function () {
                drawScenesResultTable(-1);
                drawIllegalResultTable(-1);
                this.map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
                this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            },
            drawMarks: function () {
                var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + '/faultSupports',
                    async: false,
                    dataType: 'json',
                    data: {
                        faultSupportState: 0,
                    },
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                        _self.faultSupports = data.result;
                        _self.markers = [];
                        if (_self.faultSupports.length == 0) {
                            _self.faultSupport={};
                            _self.labelShow=false;
                        } else {
                            for (var i = 0; i < _self.faultSupports.length; i++) {
                                var point = new BMap.Point(_self.faultSupports[i].longitude, _self.faultSupports[i].latitude);
                                var marker = new BMap.Marker(point);// 创建标注
                                _self.map.addOverlay(marker);
                                if (i == 0) {
                                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                                    _self.faultSupport = _self.faultSupports[i];
                                    _self.faultSupport.faultSupportStateInfo = "未处理";
                                    _self.faultSupport.createTimeInfo = replaceTimeWithoutYear(_self.faultSupport.createTime / 1000);
                                }
                                marker.addEventListener("click", function ({type, target}) {
                                    _self.markers.forEach(function (value, index, array) {
                                        if (target == array[index]) {
                                            target.setAnimation(BMAP_ANIMATION_BOUNCE);
                                            _self.faultSupport = _self.faultSupports[index];
                                            _self.faultSupport.faultSupportStateInfo = "未处理";
                                            _self.faultSupport.createTimeInfo = replaceTimeWithoutYear(_self.faultSupport.createTime / 1000);
                                        } else {
                                            value.setAnimation(null);
                                        }
                                    });

                                });
                                _self.markers.push(marker);
                                _self.labelShow=true;
                            }
                        }
                        _self.map.centerAndZoom(new BMap.Point(120.285, 36.272513), 15);  // 初始化地图,设置中心点坐标和地图级别
                    }
                });
            },
            changeState: function (faultSupportId) {
                var _self = this;
                $.ajax({
                    type: "put",
                    url: url + '/users/' + adminId + '/faultSupports/' + faultSupportId,
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            _self.markers = [];
                            _self.faultSupports = [];
                            _self.map.clearOverlays();
                            _self.drawMarks();
                        } else {
                            alert(data.description);
                        }
                    }
                });

            }

        },
    });


</script>

</body>

</html>
